<div class="example-container" [class.example-is-mobile]="mobileQuery.matches">
    <mat-toolbar color="primary" class="example-toolbar" style="justify-content: space-between; padding: 0px;"
        [style.height.px]="deviceSvc.topBar">
        <div style="display: flex;align-items: center;">
            <button mat-icon-button (click)="snav.toggle();">
                <mat-icon>{{snav.opened?'menu_open':'menu'}}</mat-icon>
            </button>
            <div style="font-size: 14px;">{{authSvc.currentUser?.email}}</div>
        </div>
        <button mat-button [matMenuTriggerFor]="menu" (click)="msgSvc.clone()">
            <mat-icon matBadge="{{msgSvc.latestMessage.length}}" matBadgeOverlap="false" matBadgeSize="small"
                matBadgeColor="accent">notifications_none
            </mat-icon>
        </button>
    </mat-toolbar>
    <mat-menu #menu="matMenu">
        <ng-container *ngIf="msgSvc.latestMessage.length===0">
            <div style="text-align: center;margin-top: 10px;">{{'NO_MSG'|translate}}</div>
        </ng-container>
        <mat-list role="list" *ngIf="msgSvc.latestMessage.length!==0">
            <ng-container>
                <mat-list-item role="listitem" *ngFor="let el of msgSvc.latestMessage">
                    <app-card-notification [value]="el"></app-card-notification>
                </mat-list-item>
            </ng-container>
        </mat-list>
    </mat-menu>
    <mat-sidenav-container class="example-sidenav-container"
        [style.marginTop.px]="mobileQuery.matches ? deviceSvc.topBar : 0">
        <mat-sidenav #snav [mode]="mobileQuery.matches ? 'over' : 'side'" [fixedInViewport]="mobileQuery.matches"
            [opened]="navExpand('side_bar')" (opened)="openedHandler('side_bar')" (closed)="closedHander('side_bar')"
            [fixedTopGap]="deviceSvc.topBar" style="width: 256px;">
            <mat-nav-list>
                <mat-list-item mat-list-item [routerLink]="nav.link" routerLinkActive="nav-active"
                    style="font-size: 14px;" [queryParams]="nav.params" *ngFor="let nav of menuTop">
                    <mat-icon style="padding-right:8px" *ngIf="nav.icon">{{nav.icon}}</mat-icon>{{nav.display| translate}}
                </mat-list-item>
            </mat-nav-list>
            <mat-expansion-panel (opened)="openedHandler('admin_nav')" (closed)="closedHander('admin_nav')" *ngIf="hasAuth()"
                [expanded]="navExpand('admin_nav')">
                <mat-expansion-panel-header>
                    <mat-panel-title style="font-weight: 600;">
                        {{'AUTH_CENTER'| translate}}
                    </mat-panel-title>
                </mat-expansion-panel-header>
                <mat-nav-list>
                    <mat-list-item mat-list-item [routerLink]="nav.link" routerLinkActive="nav-active" [preserveFragment]="true"
                        style="font-size: 14px;" [queryParams]="preserveURLQueryParams(nav)" *ngFor="let nav of menuAuthMangement">
                        <mat-icon style="padding-right:8px;">{{nav.icon}}</mat-icon>
                        {{nav.display| translate}}
                    </mat-list-item>
                </mat-nav-list>
            </mat-expansion-panel>
            <mat-expansion-panel *ngFor="let project of projectSvc.totalProjects" (opened)="openedHandler(project.id)" (closed)="closedHander(project.id)"
                [expanded]="navExpand(project.id)">
                <mat-expansion-panel-header>
                    <mat-panel-title style="font-weight: 600;">
                        {{project.name}}
                    </mat-panel-title>
                </mat-expansion-panel-header>
                <mat-nav-list>
                    <ng-container  *ngFor="let nav of menuAuth">
                        <mat-list-item mat-list-item [routerLink]="project.id+'/'+nav.link" routerLinkActive="nav-active" [preserveFragment]="true"
                            style="font-size: 14px;" [queryParams]="preserveURLQueryParams(nav)"  *appRequireP="getPermissionId(project.id,nav.authName) | async">
                            <mat-icon style="padding-right:8px;">{{nav.icon}}</mat-icon>
                            {{nav.display| translate}}
                        </mat-list-item>
                    </ng-container>
                </mat-nav-list>
            </mat-expansion-panel>

            <mat-nav-list>
                <mat-list-item mat-list-item [routerLink]="nav.link" routerLinkActive="nav-active"
                    style="font-size: 14px;" [queryParams]="nav.params" *ngFor="let nav of menuMisc">
                    <mat-icon style="padding-right:8px">{{nav.icon}}</mat-icon>{{nav.display| translate}}
                </mat-list-item>
            </mat-nav-list>
            <mat-nav-list>
                <mat-list-item mat-list-item style="font-size: 14px;" (click)="doLogout()">
                    <mat-icon style="padding-right:8px">exit_to_app</mat-icon>{{'LOGOUT'| translate}}
                </mat-list-item>
            </mat-nav-list>
        </mat-sidenav>

        <mat-sidenav-content [style.padding-left.px]="mobileQuery.matches ? 15 : 30"
            [style.padding-right.px]="mobileQuery.matches ? 15 : 30">
            <router-outlet></router-outlet>
        </mat-sidenav-content>
    </mat-sidenav-container>
</div>